<template>
  <transition :name="transition">
    <div class="weui-loading_toast vux-loading" v-show="show">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast vux-diy-toast" :style="{ position: position }">
        <!--<i class="weui-loading weui-icon_toast"></i>-->
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
          <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
          </rect>
          <rect x="8" y="10" width="4" height="10" fill="#333"  opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
          </rect>
          <rect x="16" y="10" width="4" height="10" fill="#333"  opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
          </rect>
        </svg>
        <p class="weui-toast__content">{{ $t(text) || $t('loading') }}
          <slot></slot>
          <span class="loading"></span>
        </p>
      </div>
    </div>
  </transition>
</template>

<i18n>
  loading:
  en: loading
  zh-CN: 加载中
</i18n>

<script>
  export default {
    name: 'loading',
    model: {
      prop: 'show',
      event: 'change'
    },
    props: {
      show: Boolean,
      text: String,
      position: String,
      transition: {
        type: String,
        default: 'vux-mask'
      }
    },
    watch: {
      show (val) {
        this.$emit('update:show', val)
      }
    }
  }
</script>

<style lang="less">
  @import '../../styles/weui/widget/weui_tips/weui_mask';
  @import '../../styles/weui/widget/weui_tips/weui_toast';
  @import '../../styles/weui/widget/weui-loading/weui-loading.less';

  .vux-loading .vux-diy-toast {
    z-index: 5001;
    padding-right: 10px;
    min-height: 40px;
    top: 40%;
    color: #999;
    background-color: #ecececbd;
  }

  .vux-diy-toast .weui-toast__content {
    margin: 8px 0 !important;
    float: right;
  }

  .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "..."; /* ascii code for the ellipsis character */
  }
  @keyframes ellipsis {
    from {
      width: 2px;
    }
    to {
      width: 15px;
    }
  }

  .weui-icon_toast.weui-loading {
    margin: 30px 0 0;
    width: 38px;
    height: 38px;
    vertical-align: baseline;
    display: inline-block;
  }

  .vux-mask-enter, .vux-mask-leave-active {
    opacity: 0;
  }

  .vux-mask-leave-active, .vux-mask-enter-active {
    transition: opacity 300ms;
  }

  .vux-diy-toast svg {
    margin-top: 5px;
    stroke: #ea5a49 !important;
  }

  .vux-diy-toast svg path,
  .vux-diy-toast svg rect {
    fill: #FF6700;
  }
</style>
